<template>
  <div class="table3">
    <el-form :model="props.form" label-width="120px">
      <el-form-item label="属性类型：">
        <el-select
          v-model="props.form.productAttributeCategoryId"
          placeholder="请选择属性类型"
        >
          <el-option
            v-for="(item, index) in productAttribute?.list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格：">
        <el-input disabled />
        <el-table border style="width: 200%">
          <el-table-column label="销售价格" width="180" />
          <el-table-column label="商品库存" width="180" />
          <el-table-column label="库存预警值" />
          <el-table-column label="sku编号" />
          <el-table-column label="操作" />
        </el-table>
        <el-button style="margin-top: 20px" type="primary">刷新列表</el-button>
        <el-button style="margin-top: 20px" type="primary">同步价格</el-button>
        <el-button style="margin-top: 20px" type="primary">同步库存</el-button>
      </el-form-item>
      <el-form-item label="商品参数："> <el-input disabled /></el-form-item>
      <el-form-item label="商品相册：">
        <el-upload
          action="http://120.24.64.5:8088/mall-admin/minio/upload"
          list-type="picture-card"
          :before-upload="beforeAvatarUpload"
          :on-success="handle_success"
        >
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <el-icon><Download /></el-icon>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="规格参数：">
        <el-tabs type="border-card">
          <el-tab-pane label="电脑端详情">
            <vue3-tinymce v-model="state.content" :setting="state.setting" />
          </el-tab-pane>
          <el-tab-pane label="移动端详情">
            <vue3-tinymce v-model="state.content" :setting="state.setting" />
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('changeStep', -1)"
          >上一步，填写商品促销</el-button
        >
        <el-button type="primary" @click="next">下一步，填写商品信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { ApiProductAttribute } from "../types/index";
import type { UploadProps } from "element-plus";
import type { UploadFile } from "element-plus";
import Vue3Tinymce from "@jsdawn/vue3-tinymce";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";

// 富文本配置
const state = reactive({
  content: "hello vue3-tinymce!",
  // editor 配置项
  setting: {
    height: 400, // editor 高度
    language_url: "/lang/zh-Hans.js",
    language: "zh-Hans", //注意大小写,
    plugins: "advlist autolink link image lists preview ",
    toolbar:
      "lineheight |newdocument |bold |italic |underline |strikethrough |alignleft |aligncenter |alignright |alignjustify |styleselect |formatselect |fontselect |fontsizeselect |cut |copy |paste |bullist |numlist |outdent |indent |blockquote |undo |redo |removeformat |subscript |superscript | image",
    images_upload_url: "http://120.24.64.5:8088/mall-admin/minio/upload",
    images_upload_base_path: "/demo",
  },
});

// 图片上传
const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  console.log(rawFile);

  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const handle_success = (res: any) => {
  props.form.albumPics = res.data.url;
  console.log(props.form);
  // this.$message.success('图片上传成功')
};

interface Props {
  form: IAddProductParams;
}

// 接受父组件的值
const props = withDefaults(defineProps<Props>(), {
  form: () => ({
    name: "",
  }),
});

// 商品属性
const productAttribute = ref<IProductAttribute>();

// 存商品属性select选中的值
// const attrbute=ref()
ApiProductAttribute({ pageNum: 1, pageSize: 100 }).then((res) => {
  if (res.code !== 200) return;
  productAttribute.value = res.data;
});

// 接受父组件的方法
const emit = defineEmits(["changeStep"]);
const next = () => {
  props.form.detailHtml = state.content;
  props.form.detailMobileHtml = state.content;

  emit("changeStep", 1);
};
</script>

<style scoped lang="less">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.el-upload) {
  border: 1px dashed #8c939d;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.el-tabs {
  border: 0px solid #000;
  :deep(.el-tab-pane .is-active) {
    border: 1px solid #000;
  }
}
</style>
